<script setup>
import { TurnOff } from '@element-plus/icons-vue'
import store from '../store';
import router from '../router';
const username = JSON.parse(localStorage.getItem("userInfo")).username
const liginOut = () => {
    localStorage.removeItem("userInfo")
    store.state.userInfo = {}
    router.push("/login")
}
</script>
<template>
    <div class="header">
        <div class="logo">
            <img src="@\assets\logo3.png" alt="" srcset="">
        </div>
        <div class="title">GuiShop后台管理系统</div>
        <div class="toolbar">
            <span class="username">{{ username }}</span>
            <el-button type="default" size="small" :icon="TurnOff" style="color: black;" @click="liginOut">退出登录</el-button>
        </div>
    </div>
</template>

<style scoped>
.header {
    display: flex;
    align-items: center;
    /* justify-content:center; */
    width: 100%;
    height: 100%;
    /* background-color: #409eff; */
    background: linear-gradient(to right, white, #409eff);
    border-bottom: 2px solid #303133;
    text-align: center;
    /* color: whitesmoke; */
}

.logo {
    width: 300px;
    height: 100px;
    /* background-color: white; */
    border-bottom: 1px solid #303133;
}

.title {
    width: 70%;
    height: 100%;
    color: #303133;
    font-size: 28px;
    line-height: 100px;
}

.toolbar {
    height: 100%;
    flex: 1;
    color: whitesmoke;
    display: inline-flex;
    align-items: center;
}

.username {
    margin-right: 10px;
    color: whitesmoke;
}</style>